var carousel = document.querySelector("ul"),
	left_arrow = document.querySelector(".left_arrow"),
	right_arrow = document.querySelector(".right_arrow"),
	carousel_box = document.querySelector(".carousel_box"),
	controls = document.querySelectorAll("ol li"),
	now_index = 0,
	last_index=0,
	is_run=false;
	srll();
//右键点击事件
right_arrow.addEventListener("click", function() {
	if(!is_run){
		is_run=true;
	++now_index >= 5 ? now_index = 0 : "";
	run(now_index);}
})

//左键点击事件
left_arrow.addEventListener("click", function() {
	if(!is_run){
		is_run=true;
	--now_index < 0 ? now_index = 4 : "";
	run(now_index);}
})

//自定义属性  控制圆点事件
//for(var i=0;i<controls.length;i++){
//	controls[i].setAttribute("data-index",i);    controls[i].index=i;
//	controls[i].addEventListener("mouseover",function(){
//		run(this.getAttribute("data-index"));
//	})
//	}

//圆点控制之闭包
for(var i=0;i<controls.length;i++){
	(function(j){
		controls[j].addEventListener("mousemove",function(){
			now_index=j;
		run(j);
	})
	})(i)
	
}


//事件代理圆点控制
//document.querySelector("ol").addEventListener("mouseover",function(e){
//	if(e.target.nodeName=="LI"){
//		for(var i=0;i<controls.length;i++){
//			if(e.target==controls[i]){
//				console.log(i);
//				run(i);
//				return;
//			}
//		}
//	}
//})

//  自动轮播
function srll(){
	var settime=setInterval(function(){
		if(!is_run){
			is_run=true;
		++now_index >= 5 ? now_index = 0 : "";
		run(now_index);}
	},2000)
	//   鼠标移入停止轮播
	carousel_box.addEventListener("mouseover",function(){
		window.clearInterval(settime);
	})
}
//   鼠标移出继续轮播
carousel_box.addEventListener("mouseleave",function(){
	srll();
})

//轮播图运行主函数
function run(target_index){
	carousel.style.transform = "translateX(-" + target_index * 100 + "%)";
	controls[last_index].classList.remove("active");
	last_index=target_index;
	controls[target_index].classList.add("active");
	carousel.addEventListener("transitionend",function(){
		is_run=false;})
}
